//
//  SmallView.swift
//  MySwiftUIDemo
//
//  Created by wangws1990 on 2024/7/9.
//

import SwiftUI

struct SmallView: View {
    @State var index: Int = 0
    
    @State var indexRight: Int = 0
    //最少7个
    @State var listInt: [String] = ["icon_puzz_sub7_1","icon_puzz_sub7_2","icon_puzz_sub7_3","icon_puzz_sub7_4","icon_puzz_sub7_5"]
    @State var isleft :Bool = false
    @ViewBuilder
    func getSechmenet()->some View{
        HStack(spacing: 30, content: {
            Button("redese") {
                isleft = true
                index = index - 1
                debugPrint(index)
            }.foregroundColor(.white).padding().background(ZStack{
                Color.red
            })
            Button("add") {
                isleft = false
                index = index + 1
                debugPrint(index)
            }.foregroundColor(.white).padding().background(ZStack{
                Color.red
            })
        })
    }
    func getIndex(_ objc: String)->Int{
        return listInt.firstIndex { item in
            return item == objc
        } ?? 0
    }
    func show(_ objc: String)->Double{
        return getIndex(objc) == 2 ? 1 : 0
    }
    var isFilp: Bool{
        return abs(index) % 2 == 1
    }
    @ViewBuilder
    var backView: some View{
        Color.red.frame(width: 150,height: 150)
    }
    var frontView: some View{
        Color.yellow.frame(width: 150,height: 150)
    }
    var isFilpRight: Bool{
        indexRight % 2 == 0
    }
    var isFilpLeft: Bool{
        abs(index) % 2 == 0
    }
    var body: some View {
        let offset_x = 170.0
        ZStack{
            Color.clear
            Color.blue
            VStack{
                getSechmenet()
                ZStack{
                    Color.white
                    FlippedPhotoSmallViewLeft(isFlipped: isFilpLeft,offset_x: 170) {
                        Color.red.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                    } backView: {
                        Color.black.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                    }
                    .zIndex(isleft ? 100 : 0)
                    Color.blue.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                        .offset(x: isleft ? 0 : -170)
                        .animation(.linear(duration: 0.4), value: isleft)
                        .compositingGroup()
                        .zIndex(isleft ? 10 : 0)
                    FlippedPhotoSmallViewRight(isFlipped: !isFilpLeft,offset_x: 170) {
                        Color.black.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                    } backView: {
                        Color.red.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                    }
                    .zIndex(!isleft ? 1 : 0)
                    
                    ZStack{
                        Color.green.frame(width: 150,height: 150).cornerRadius(10, antialiased: true)
                            .compositingGroup()
                            .offset(x: isleft ? 0 : -170)
                            .animation(.linear(duration: 0.4), value: isleft)
                            .compositingGroup()
                    }
                    .compositingGroup()
                    .opacity(isleft ? 0 : 100)
                    .animation(.linear(duration: 0.01).delay(0.4), value: isleft)
                    .compositingGroup()
                    .zIndex(!isleft ? 2 : 0)

                    
                }.frame(width: 170,height: 170).clipped().compositingGroup()

            }
        }
    }
    @ViewBuilder
    func getContent(_ objc :String,des: CGFloat)->some View{
        ZStack{
            Image("icon_puzz_sub6_icon_bg").resizable().scaledToFill()
            if let img = objc.components(separatedBy: "=").first{
                Image(img).resizable().scaledToFill().frame(width: 120,height: 120).offset(y:-10)
            }
        }
        .frame(width: 150,height: 200)
        .cornerRadius(10, antialiased: true)
        .rotationEffect(.degrees(des))
    }
    @ViewBuilder
    func getBottom(_ objc:String)->some View{
        ZStack{
            
            ZStack{
                getContent(objc, des: 0)
                    .compositingGroup()
                    .rotationEffect(.degrees(abs(index)%2 == 0 ? 3 : -3))
                    .animation(.linear, value: index)
                    .compositingGroup()
            }
            .compositingGroup()
            .opacity(abs(index)%2 == 1 ? 0 : 1)
            .animation(.linear.delay(0.4), value: index)
            .compositingGroup()
            ZStack{
                getContent(objc, des: 0)
                    .compositingGroup()
                    .rotationEffect(.degrees(abs(index)%2 == 0 ? -3 : 3))
                    .animation(.linear, value: index)
                    .compositingGroup()
            }
            .compositingGroup()
            .opacity(abs(index)%2 == 0 ? 0 : 1)
            .animation(.linear.delay(0.4), value: index)
            .compositingGroup()
        }.compositingGroup()
    }
}

struct FlippedPhotoSmallViewLeft<FrontView, BackView>: View where FrontView: View, BackView: View{
    let isFlipped: Bool
    var offset_x: CGFloat = 0
    var frontView: () -> FrontView
    var backView: () -> BackView
    var body: some View {
        ZStack{
            let font = isFlipped
            let back = !isFlipped
            let durationZero = 0.001//g_isInWidget ? 0.0 : 0.001
           // backView().rotationEffect(.degrees(3))
            ZStack{
                ZStack{
                    backView()
                        .compositingGroup()
                        .offset(x: back ? -offset_x : 0)
                        .animation(back ?.easeOut(duration: durationZero).delay(0.4) : .spring(duration: 0.4), value: back)
                        .compositingGroup()
       
                }
            }
//            .compositingGroup()
//            .rotationEffect(.degrees(!back ? 3 : -3))
//            .animation(back ? .spring.delay(0.5) : .spring.delay(0.4), value: back)
//            .compositingGroup()
            .zIndex(back ? 0 : 1)
            ZStack{
                ZStack{
                    frontView()
                        .compositingGroup()
                        .offset(x: font ? -offset_x : 0)
                        .animation(font ?.easeOut(duration: durationZero).delay(0.4) : .spring(duration: 0.4), value: font)
                        .compositingGroup()
               
                }
            }
//            .compositingGroup()
//            .rotationEffect(.degrees(font ? -3 : 3))
//            .animation(font ? .spring.delay(0.5) : .spring.delay(0.4), value: font)
//            .compositingGroup()
            .zIndex(font ? 0 : 1)
            
        }
    }
}
struct FlippedPhotoSmallViewRight<FrontView, BackView>: View where FrontView: View, BackView: View{
    let isFlipped: Bool
    var offset_x: CGFloat = 0
    var frontView: () -> FrontView
    var backView: () -> BackView
    var body: some View {
        ZStack{
            let font = isFlipped
            let back = !isFlipped
            ZStack{
                ZStack{
                    backView()
                        .compositingGroup()
                        .offset(x: back ? -offset_x : 0)
                        .animation(back ? .linear(duration: 0.4) : .none, value: back)
                        .compositingGroup()
                }
            }
//            .compositingGroup()
//            .rotationEffect(.degrees(back ? 3 : -3))
//            .animation(back ? .linear.delay(0.4) : .linear.delay(0.1), value: back)
//            .compositingGroup()
            .zIndex(back ? 1 : 0)
            ZStack{
                ZStack{
                    frontView()
                        .compositingGroup()
                        .offset(x: font ? -offset_x : 0)
                        .animation(font ? .linear(duration: 0.4) : .none, value: font)
                        .compositingGroup()
                }
            }
//            .compositingGroup()
//            .rotationEffect(.degrees(font ? 3 : -3))
//            .animation(font ? .linear.delay(0.4) : .linear.delay(0.1), value: font)
//            .compositingGroup()
            .zIndex(font ? 1 : 0)
            
        }
    }
}
